<template>
<div class="app-container page-container edit-project-view">
    <div class="moduleBox">
        <BoxHead
            class="title-container"
            title="基本信息"
            :showBt="false">
            <template #right>
            </template>
        </BoxHead>
        <BaseInfoForm
            style="margin-top:15px;"
            ref="BaseInfoFormRef"
            :isShow="isShow">
        </BaseInfoForm>
    </div>
    <div 
        class="moduleBox">
        <SalesContainer
            :tableData="dataContainer.tableData"
            :isShow="isShow || dataContainer.dataInfo.status==2"
            :isAdd="!dataContainer.form.id">
        </SalesContainer>
        <!-- <div 
            v-if="!isShow" 
            class="btnBox isFlex">
            <div 
                v-if="dataContainer.dataInfo.status!=2"
                class="cancel"
                @click="handleSaveSales">
                暂存销售信息
            </div>
            <div
                @click="handleSubmit">
                确定
            </div>
        </div> -->
    </div>
    <div 
        class="moduleBox">
        <el-form
            :model="dataContainer.form"
            ref="FormElRef"
            :inline="true"
            label-width="120px">
            <el-row :gutter="10" class="app-container-item">
                <el-col :span="24">
                    <el-form-item 
                        label="收入确认方式" prop="revenueConfirmMethod"
                        :rules="[
                            {
                                required: true,
                                message: '请选择',
                                trigger: 'change',
                            },
                        ]">
                        <el-select 
                            v-model="dataContainer.form.revenueConfirmMethod"
                            :disabled="isShow"
                            placeholder="请选择">
                            <el-option
                                v-for="item in bu_revenue_confirm_method"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"/>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
    <DuanContainer
        v-show="!!dataId"
        :tableData="dataContainer.tableData1"
        :isShow="true">
    </DuanContainer>
    <div 
        v-if="!isShow" 
        class="moduleBox">
        <div
            class="btnBox isFlex">
            <div 
                v-if="dataContainer.dataInfo.status!=2"
                class="cancel"
                @click="handleSave">
                暂存
            </div>
            <div
                @click="handleSubmit">
                确定
            </div>
        </div>
    </div>
</div>
</template>

<script>
/**
 * 项目管理编辑页面
 */
import BaseInfoForm from "./projectComponents/BaseInfoForm";
import SalesContainer from "./projectComponents/SalesContainer";
import DuanContainer from "./components/DuanContainer";
import { defineComponent,ref,getCurrentInstance,reactive,computed } from "vue";
import { useRouter,useRoute } from "vue-router";
import {
    get as getProjectApi,
    add as addProjectApi,
    update as updateProjectApi,
} from "@/api/research/project";
import { createEventSingleton } from '@/common/DefineEvent';
import { list as salesPeriodListApi } from '@/api/research/salesPeriod';
import BoxHead from '@/components/BoxHead';
import { update as salesOrderUpdateApi } from '@/api/research/salesOrder';
import { deepCopyObj } from "@/common/OtherTools";

export default defineComponent({
    name:'EditProject',
    components:{ BaseInfoForm,SalesContainer,DuanContainer,BoxHead },
    setup(){
        const { proxy:instance } = getCurrentInstance();
        const BaseInfoFormRef = ref(null);
        const FormElRef = ref(null);
        const route = useRoute();
        const routeQuery = toRef(route,'query');
        const isShow = computed(()=>{  //是否是查看
            return routeQuery.value.isShow == 'true';
        });
        const dataId = ref(route.query.id);  //该数据的id
        const dataContainer = reactive({
            loading:false,
            form:{},
            tableData:[],  //表格数据
            tableData1:[],  //表格数据 
            dataInfo:{},  //详细数据
        });
        const dictData = instance.useDict("bu_revenue_confirm_method");  //获取一些字典数据
        /** 保存基本信息 */
        function handleSave(otherParams){
            if(!BaseInfoFormRef.value || !FormElRef.value) return;
            FormElRef.value.validate((valid)=>{
                if(!valid) return;
                BaseInfoFormRef.value.getData().then(form=>{
                    dataContainer.loading = true;
                    const params = deepCopyObj(form);  //防止数据混乱
                    Object.assign(params,otherParams);
                    Object.assign(params,dataContainer.form);
                    params.salesOrderList = dataContainer.tableData;
                    params.status = params.status || 1;
                    let task;
                    if(!!params.id){  //表示更新数据
                        task = updateProjectApi(params);
                    }else{
                        task = addProjectApi(params);
                    }
                    task.then(() => {
                        instance.$modal.msgSuccess("操作成功");
                        instance.$tab.closeOpenPage({name:'ProjectManagement'});
                        emitEvent();
                    }).catch(() => {
                        instance.$modal.msgError("操作失败");
                    }).finally(()=>{
                        dataContainer.loading = false;
                    });
                }).catch(()=>{});
            });
        }
        /** 提交基本信息 */
        function handleSubmit(){
            instance.$modal.confirm('是否提交？').then(()=>{
                handleSave({status:2});
            }).catch(() => {});
        }
        /** 保存销售信息 */
        function handleSaveSales(){
            salesOrderUpdateApi({
                projectId:dataId.value,
                buYxSalesOrderList:dataContainer.tableData.map(item=>{
                    return {
                        projectId:dataId.value,
                        ...item,
                    };
                }),
            }).then(()=>{
                instance.$modal.msgSuccess("操作成功");
            }).catch(()=>{
                instance.$modal.msgError("操作失败");
            });
        }
        /** 获取学段信息 */
        function getSalesPeriodList(){
            salesPeriodListApi({
                pageNum:1,
                pageSize:999,
                projectId:dataId.value,
            }).then(res=>{
                dataContainer.tableData1 = res.rows || [];
            }).catch(()=>{
                return;
            });
        }
        /** 触发携带的事件 */
        /** #FIXME 触发事件例子 */
        function emitEvent(){
            const event = createEventSingleton();
            event.emit('project-management-view-refresh');
        }
        /** 初始化数据 */
        function initData(){
            getProjectApi(dataId.value).then(res=>{
                const data = res.data || {};
                dataContainer.form = data;
                BaseInfoFormRef.value.initData(data);
                dataContainer.dataInfo = data;
                dataContainer.tableData = data.salesOrderList || [];
            }).catch(()=>{
                instance.$modal.msgError("数据获取失败");
            });
            getSalesPeriodList();
        }
        if(!!dataId.value){
            initData();
        }
        return {
            dataContainer,dataId,
            handleSave,handleSubmit,BaseInfoFormRef,
            handleSaveSales,isShow,FormElRef,
            ...dictData,
        };
    },
});
</script>

<style lang="scss" scoped>
.edit-project-view{
    width: 100%;
    min-height: 100%;
    height: fit-content;
}
</style>

<style scoped>
#mainBodyBox{
  overflow-y: auto!important;
}
.addBtn,.delBtn{
  display: flex;
  font-size: 16px;
  color: #1CA3DD;
  height: 30px;
  align-items: center;
  background: rgba(28, 163, 221, 0.2);
  border: 1px solid #1CA3DD;
  border-radius: 4px;
}
.delBtn{
  color: #BB2735;
  float: right;
  margin-left: 8px;
  background: rgba(187, 39, 53, 0.2);
  border: 1px solid #BB2735;
}
.addBtn img,.delBtn img{
  margin-left: 4px;
  width: 15px;
  height: 15px;
}
.el-select,
.el-form-item__content,
.el-input.el-input--default.el-input--suffix,
.el-form--inline .el-form-item {
  width: 100% !important;
}
.btnBox{
  margin-top: 12px;
  justify-content: center;
  margin-top: 12px;
}
.btnBox div{
  width: 134px;
  height: 37px;
  text-align: center;
  line-height: 37px;
  font-size: 16px;
  cursor: pointer;
  background: linear-gradient(86deg, #BB2735, #FF818D);
  border-radius: 4px;
  color: #FFFFFF;
}
.cancel{
  color: #BB2735!important;
  background: #FFFFFF!important;
  border: 1px solid #BB2735!important;
  margin-right:25px;
}

</style>